<template>
  <div>登录成功后的跳转</div>
  <div>
    <h2>Profile</h2>
    <p>Welcome, {{ username }}!</p>
    <button @click="logout">Logout</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
console.log(
  '获取跳转的参数',
  route.query.user,
  '获取token？',
  localStorage.getItem('__DC_STAT_UUID')
)

const username = computed(() => {
  return route.query.user
})

const fetchUserProfile = async () => {
  try {
    const response = await axios.get('http://localhost:3000/profile', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('__DC_STAT_UUID')}`,
      },
    })
    console.log('成功了', response)

    user.value = response.data.user
  } catch (err) {
    console.error('Failed to fetch user profile:', err)
  }
}

const logout = () => {
  localStorage.removeItem('token')
  window.location.href = '/login'
}

onMounted(() => {
  fetchUserProfile()
})
</script>

<style lang="scss" scoped>
</style>
